<template>
	<view class="comparison">
		<view class="back">
			<view class="icon-left">
				<u--image src="../../../static/images/icon-back.svg" width="8px" height="15px"></u--image>
			</view>
			<view class="txt-tab">
				<text class="txt-tab-active" @click="tabActive = 1">参数对比</text>
				<text class="txt-tab-default" @click="tabActive = 2">外观对比</text>
			</view>
		</view>
		
		<!-- content -->
		<view class="comparisonContent" v-if="tabActive == 1">
			<view class="compar-left">
				<text class="compar-left-txt" style="height: 191px;;">产品信息</text>
				<text class="compar-left-txt" style="">产品价格</text>
				<text class="compar-left-txt" style="">历年中标价</text>
				<text class="compar-left-txt" style="">整机重量</text>
			</view>
			<view class="compar-right" :style="{width: wWidth - 191 + 'px'}">
				<u-scroll-list :indicator="false">
				    <view class="storewrap" v-for="item in comparisonList">
				    	<view style="height: 191px;;border-bottom: 1px solid #d8d8d8;">
							<u--image src="" width="100px" height="100px"></u--image>
							<text class="store-txt">{{item.name}}</text>
						</view>
						<view class="default-txt" style="line-height: 40px;">{{item.price}}</view>
						<view class="default-txt" style="line-height: 40px;">{{item.price}}</view>
						<view class="default-txt" style="line-height: 40px;">{{item.price}}</view>
				    </view>
				</u-scroll-list>
			</view>
		</view>
		
		<view class="comparisonContent" v-if="tabActive == 2">
			<view class="compar-left">
				<text class="compar-left-txt" style="height: 191px;;">产品信息</text>
				<text class="compar-left-txt" :style="{height: tabHeigiht + 'px'}" style="">产品图片</text>
			</view>
			<view class="compar-right" :style="{width: wWidth - 191 + 'px'}">
				<u-scroll-list :indicator="false">
				    <view class="storewrap" v-for="item in comparisonList">
				    	<view style="height: 191px;;border-bottom: 1px solid #d8d8d8;">
							<u--image src="" width="100px" height="100px"></u--image>
							<text class="store-txt">{{item.name}}</text>
						</view>
						<view class="default-txt2" style="line-height: 40px;"><u--image src="" width="100px" height="95px" style=""></u--image></view>
						<view class="default-txt2" style="line-height: 40px;"><u--image src="" width="100px" height="95px" style=""></u--image></view>
						<view class="default-txt2" style="line-height: 40px;"><u--image src="" width="100px" height="95px" style=""></u--image></view>
				    </view>
				</u-scroll-list>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabActive: 1,
				wWidth: '',
				comparisonList: [
					{id: 1, name: '北斗信号弹TD10（北斗三号短报文急示位搜救终端）', price: 100, zb: 100, zj: 100},
					{id: 1, name: '北斗信号弹TD10（北斗三号短报文急示位搜救终端）', price: 100, zb: 100, zj: 100},
					{id: 1, name: '北斗信号弹TD10（北斗三号短报文急示位搜救终端）', price: 100, zb: 100, zj: 100},
					{id: 1, name: '北斗信号弹TD10（北斗三号短报文急示位搜救终端）', price: 100, zb: 100, zj: 100},
					{id: 1, name: '北斗信号弹TD10（北斗三号短报文急示位搜救终端）', price: 100, zb: 100, zj: 100},
				]
			}
		},
		created() {
			uni.getSystemInfo({
			  success: (info) => {
			    this.wWidth = info.windowWidth;
			  }
			});
		},
		computed: {
			tabHeigiht() {
				const list = 3;
				return list * 120 + 3
			},
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.comparison {
		position: relative;
		
		.back {
			position: relative;
			width: 95%;
			margin: 0 auto;
			height: 44px;
			line-height: 44px;
			box-sizing: border-box;
			padding: 0 15px;
			border-bottom: 1px solid #eee;
			
			.icon-left {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.txt-tab {
				position: absolute;
				width: 100%;
				left: 0;
				text-align: center;
				font-size: 16px;
				color: #2E3033;
				
				.txt-tab-default {
					color: rgba(46, 48, 51, 0.6);
					display: inline-block;
				}
				.txt-tab-active {
					color: rgba(46, 48, 51, 1);
					margin-right: 30px;
					display: inline-block;
				}
			}
		}
		
		.comparisonContent {
			display: flex;
			
			.compar-left {
				width: 80px;
				height: 40px;
				line-height: 40px;
				padding: 0 13px 0 0;
				font-size: 14px;
				color: #2E3033;
				text-align: center;
				display: block;
				position: fixed;
				left: 0;
				
				
				
				.compar-left-txt {
					color: #696a6c;
					width: 100%;
					border-bottom: 1px solid #d8d8d8;
					border-right: 1px solid #d8d8d8;
					background: #F7F8FA;
					text-align: center;
					display: block;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center
				}
			}
			.compar-right {
				flex: 1;
				padding-left: 81px;
				
				.storewrap {
					position: relative;
					box-sizing: border-box;
					
					width: 120px;
					text-align: center;
					border-bottom: 1px solid #d8d8d8;
					border-right: 1px solid #d8d8d8;
					
					.store-txt {
						font-size: 12px;
						color: #2E3033;
						display: inline-block;
					}
					
					.default-txt {
						font-size: 14px;
						color: #2E3033;
						min-height: 40px;
						border-bottom: 1px solid #d8d8d8;
						
					}
					
					.default-txt2 {
						height: 120px;
						min-height: 120px;
						border-bottom: 1px solid #d8d8d8;
						display: flex;
						align-items: center;
					}
				}
				
			}
		}
	}
</style>